<template>
	<view class="list-header-container">
		<view class="list-header-title" :style="{fontSize:fontSize}">
			<image class="" mode="aspectFit" src="@/static/icons/sanjiao.png"></image>
			<text class="cl-w">{{title}}</text>
			<text class="list-header-sub-title  " v-if="subTitle">{{'/'+subTitle}}</text>
		</view>
		<view class="list-header-trail  " @click="itemTap" v-if="content">{{content}}</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: String,
			subTitle: String,
			fontSize: {
				type: String,
				default: "16px"
			},
			content: String,
			id: String
		},
		data() {
			return {

			}
		},
		// computed: {
		//     bottomSafeHeight: function() {
		//         return e.getStorageSync("deviceInfo").bottomSafeAreaHeight;
		//     }
		// },
		methods: {
			itemTap: function() {
				this.$emit("itemTap");
			}
		}
	}
</script>

<style lang="scss">
	.list-header-container {
		align-items: center;
		display: flex;
		font-size: 30rpx;
		justify-content: space-between;
		margin: 35rpx 30rpx 6rpx;
	}

	.list-header-container .list-header-title {
		align-items: center;
		display: flex;
		flex: 1;
		font-size: 16px;
		font-weight: 500;
		font-weight: 350;
		margin-right: 9rpx;
		padding-bottom: 2px;
		padding-left: 4rpx;
		z-index: 99;
		color: #fff;
	}

	.list-header-container .list-header-title image {
		height: 25rpx;
		margin-bottom: -1rpx;
		margin-right: 15rpx;
		width: 25rpx;
	}

	.list-header-container .list-header-sub-title {
		color: hsla(0, 0%, 100%, .5);
		font-size: 26rpx;
		font-weight: 400;
		margin-left: 14rpx;
	}

	.list-header-container .text {
		color: hsla(0, 0%, 100%, .5);
		font-size: 28rpx;
		font-weight: 400;
		margin-left: 14rpx;
	}

	.list-header-container .list-header-trail {
		align-items: center;
		backdrop-filter: blur(7px);
		background-color: rgba(252, 255, 255, .3);
		border-radius: 50rpx;
		color: #fff;
		display: inline-flex;
		font-size: 28rpx;
		font-weight: 400;
		height: 50rpx;
		justify-content: center;
		width: 160rpx;
	}
</style>